<template>
    <div class="page-wrap page-wrap-ql">
        <div class="page-cont">
            <a-page-header @back="handleBack">
                <template #title> {{ $route.query.reportName }} </template>
            </a-page-header>
            <div style="padding: 24px 0">
                <flexbox style="padding: 0 24px 12px 24px; background: #fff">
                    <span>产品或子产品：</span>
                    <HCascader
                        placeholder="请选择"
                        :allowClear="false"
                        :default-value="catalogCode"
                        :options="treeData"
                        labelField="catalogName"
                        valueField="catalogCode"
                        show-search
                        childrenField="subNodes"
                        @change="handleCascaderChange"
                    />
                </flexbox>
                <div class="abnormal">
                    <PreviewDetail :catalogCode="catalogCode" :parentInfo="parentInfo" v-if="catalogCode" />
                </div>
            </div>
        </div>
    </div>
</template>

<script lang="ts">
import api from '@/api';
import { deepClone } from '@/utils/util';
import PreviewDetail from './Detail/index.vue';
import { HCascader } from '@/components';
import { ClockCircleOutlined, CloseCircleOutlined, CheckCircleOutlined } from '@ant-design/icons-vue';
import { useRouterApi } from '@/hooks/common/useRouterApi';
import { getParent, treeFilter } from '@/utils/tree';
import { defineComponent, ref, unref, reactive, toRefs, computed } from 'vue';
export default defineComponent({
    name: 'analysisReportPreview',
    components: {
        ClockCircleOutlined,
        CloseCircleOutlined,
        CheckCircleOutlined,
        PreviewDetail,
        HCascader
    },
    setup() {
        const { router, route, handleBack } = useRouterApi({
            backQuery: {
                path: '/setting'
            }
        });
        const state = reactive<any>({
            loading: false,
            detail: {},
            systemList: [],
            reportName: '',
            activeKey: null,
            isEmpty: false,
            catalogCode: '',
            parentCatalogCode: '',
            treeData: [],
            copyTreeData: [],
            parentInfo: {}
        });

        const showDetail = (id) => {
            router.push({
                path: '/energyManage/analysisReport/detail',
                query: {
                    id
                }
            });
        };

        const transformDataByFlatProperty = (data, fields = { keyField: 'node', childrenField: 'subNodes' }) => {
            const { keyField, childrenField } = fields;
            data.forEach((item, index) => {
                data[index] = {
                    ...data[index],
                    ...data[index][keyField],
                    catalogName: data[index][keyField].catalogName
                };
                if (item[childrenField] && item[childrenField].length && data[index].catalogCode !== '2202303080042') {
                    data[index][childrenField] = transformDataByFlatProperty(item[childrenField], fields);
                } else {
                    data[index][childrenField] = null;
                }
            });
            return data;
        };
        const transformDataByFlatPropertyCopy = (data, fields = { keyField: 'node', childrenField: 'subNodes' }) => {
            const { keyField, childrenField } = fields;
            data.forEach((item, index) => {
                data[index] = {
                    ...data[index],
                    ...data[index][keyField],
                    catalogName: data[index][keyField].catalogName
                };
                if (item[childrenField] && item[childrenField].length) {
                    data[index][childrenField] = transformDataByFlatPropertyCopy(item[childrenField], fields);
                } else {
                    data[index][childrenField] = null;
                }
            });
            return data;
        };
        const initData = (catalogCode) => {
            if (catalogCode === '2202303080042') {
                const parentInfo: any = getParent(catalogCode, state.copyTreeData, {
                    keyField: 'catalogCode',
                    childrenField: 'subNodes'
                });
                // 获取节点详细信息
                const getItem = (val, defaultOptions) => {
                    let options = defaultOptions;
                    let target: any = {};
                    while (val.length) {
                        const id = val.shift();
                        target = options.find((item) => item['catalogCode'] === id);
                        if (target) {
                            options = target['subNodes'];
                        }
                    }
                    return target;
                };
                const target = getItem([parentInfo.catalogCode, catalogCode], state.copyTreeData);
                state.parentInfo = target;
                state.catalogCode = catalogCode;
            } else {
                state.parentInfo = getParent(catalogCode, state.copyTreeData, {
                    keyField: 'catalogCode',
                    childrenField: 'subNodes'
                });
                if (state.parentInfo.catalogCode === '2202303080042') {
                    state.catalogCode = '2202303080042';
                } else {
                    state.catalogCode = catalogCode;
                }
            }
        };
        // tab列表
        const getTreeData = async () => {
            const { success, moule } = await api.systemReportModel.getReportPBITreeData({
                id: route.query.id
            });
            if (success) {
                if (moule) {
                    // 获取原始数据
                    state.copyTreeData = transformDataByFlatPropertyCopy(deepClone(JSON.parse(moule)));
                    state.treeData = transformDataByFlatProperty(deepClone(JSON.parse(moule)));
                    initData(route.query.catalogCode);
                } else {
                    state.isEmpty = true;
                }
            }
        };
        const handleCascaderChange = ({ nodeArr }) => {
            initData(nodeArr[nodeArr.length - 1]);
        };

        const init = () => {
            if (route.query.catalogCode) {
                state.activeKey = route.query.catalogCode;
            }
            getTreeData();
        };
        init();

        return {
            ...toRefs(state),
            handleBack,
            showDetail,
            handleCascaderChange
        };
    }
});
</script>
<style scoped lang="less">
.page-wrap {
    height: 100%;
    position: relative;
    .page-cont {
        background: #fff;
        .btn-group {
            margin: 24px 0;
            button + button {
                margin-left: 8px;
            }
        }
        .abnormal {
            height: calc(100vh - 236px);
        }

        ::v-deep(.ant-page-header) {
            border-bottom: none !important;
            padding: 16px 24px 0 24px;
        }
    }
}
</style>